<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        html body{
            width: 100%;
            height: 100%;
            margin: 0px;
            text-align: center;
        }
        .loginDiv{
            display: inline-block;
            width: 350px;
            height: 400px;
            background-color: lightblue;
            margin-top: 200px;
            border-radius: 30px;
        }
        .loginDiv span{
            height: 80px;
            display: block;
        }
        .loginDiv input{
            width: 70%;
            height: 30px;
            text-align: center;
            font-size: 18px;
            margin-bottom: 30px;
        }
        .loginDiv button{
            width: 73%;
            height: 30px;
            text-align: center;
            font-size: 18px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="loginDiv">
        <span></span>
        <input id="usernameInput" type="text" placeholder="请输入您的用户名" />
        <input id="passwordInput" type="password" placeholder="请输入您的密码" />
        <button onclick="login()">登录</button>
        <button onclick="register()">注册</button>
    </div>

    <!-- 导入jquery -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        function login(){
            var user = new Object();
            user.username = $('#usernameInput').val();
            user.password = $('#passwordInput').val();
            
            var url = "http://127.0.0.1:80";
            url += "/login";
            $.post(url,JSON.stringify(user),function(response){
                var result = JSON.parse(response);
                if(result.result == "success"){
                    alert("登录成功");
                    window.sessionStorage.setItem("user",user.username);
                    window.location.href = "home.html";
                    return;
                }

                alert("用户名或密码错误");
            });
        }
        function register(){
            var user = new Object();
            user.username = $('#usernameInput').val();
            user.password = $('#passwordInput').val();

            if( user.username == '' || user.password == ''){
                alert("用户名和密码均不能为空！");
                return;
            }
            
            var url = "http://127.0.0.1:80";
            url += "/register";
            $.post(url,JSON.stringify(user),function(response){
                var result = JSON.parse(response);
                if(result.result == "success"){
                    alert("注册成功");
                    $('#usernameInput').val('');
                    $('#passwordInput').val('');
                    return;
                }

                alert("注册失败");
            });
        }
        $(document).ready(function () {
            
        });
    </script>
</body>
</html>